<template>
  <div class="jifen">
    <header>
      <div class="left"><a><img src="../assets/img/m1.png" ></a></div>
      <div class="center">{{msg}}</div>  
      <div class="right"><a></a></div>
    </header>
    <main>
    <div class="haoma">
      <img class="one" src="../assets/img/m47.png" >
      <img class="two" src="../assets/img/m50.png">
      <input type="text" v-model="mobile">
    </div>
    <div class="yaoqingma">
      <div class="left">邀请码</div>
      <div class="right">
        <input type="text" v-model="code" placeholder="请输入邀请码">
      </div>
    </div>
    <div class="wenzi">
      如果邀请码输入错误或不输入，注册将不活的积分

    </div>
    <div class="xieyi" @click="accept=!accept">
      <img src="../assets/img/m49.png" v-show="!accept">
      <img src="../assets/img/m48.png" v-show="accept">
      <p>同意公司</p><a>用户协议</a>
    </div>
  </main>
  <footer>
    <div class="anniu" :class="{anniun:canNext}" @click="next">
      下一步
    </div>
    <p>遇到问题你可以及时<a>与客服联系</a></p>
  </footer>

  </div>
  
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: '手机快速注册',
      xuanzhong: true,
      xia: false,
      mobile: '',
      code: '',
      accept: false
    }
  },
  computed: {
    canNext () {
      return (this.mobile.length>=11&&this.mobile.length<13) && this.code.length>0 && this.accept
    }
  },
  methods: {
    next () {
      if(this.canNext){
        alert('通过')
      }else{
        alert('选中同意，或手机号不真正确')
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
@import '.././assets/css/reset.css';
  @import '.././assets/css/index.less';
header{
  position: fixed;
  top: 0;
  width: 100%;
  .height(140);
  .font-size(40);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #28a85b;
  color:#ffffff;
  .left,.right{
      .width(160) ;
  }
  .center{
      flex: 1;
      text-align: center;
  }
  .left{
    a{
      display: block;
      img{
        .height(40);
        .padding(0,0,0,40);
        display: block;
      }
    }
  }
}
main{
  .padding(190,93,0,93);
  .haoma{
    border:2px solid black;
    .height(120);
    display: flex;
    align-items: center;
    img{
      display: block;
    }
    .one{
      .height(55);
      .padding(0,40,0,40);
    }
    .two{
      .height(85);
    }
    input{
      .height(120);
      border:none;
      .padding(0,0,0,40);
      .font-size(30);
    }

  }
  .yaoqingma{
    .margin(50,0,0,0);
    display: flex;
    .left{
      .font-size(30);
      .line-height(100);
      .width(110);
    }
    .right{
      .width(350);
      .padding(0,0,0,20);
      border:2px solid black;
      input{
        .line-height(100);
        width: 100%;
        border:none;
        .font-size(30);

      }

    }
  }
  .wenzi{
    .font-size(25);
    text-align: center;
    .line-height(50);
  }
  .xieyi{
    .padding(50,0,0,0);
    display: flex;
    align-items: center;
    img{
      display: block;
      .height(45);
      .padding(0,20,0,0);
    }
    a{
      display: block;
      color: #1f6038;
      .font-size(30);
      text-decoration: none;
    }
    p{
       .font-size(30);
    }
  }
}
footer{
  .padding(160,0,0,0);
  .anniu{
    text-align: center;
    .line-height(100);
    background: #a8a8a8;
    width: 70%;
    margin: 0 auto;
    color: #ffffff;
    .border-radius(10);
  }
  .anniun{
    background: #28a85b;
  }
  p{
    color: #a8a8a8;

    .line-height(80);
    
    width: 70%;
    margin: 0 auto;
    a{
       color: #28a85b;

    }
  }
}
</style>
